@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}
*{
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "楷体";
}
.clear{
    clear: both;
}
html,body,.web{
    width: 100%;
    height: 100%;
}
.music{
    position: fixed;
    right: vw(10);
    top: vw(10);
    width:vw(50);
    height: vw(50);
    z-index: 999;
    border-radius: 100%;
    img{
        width: 100%;
        height: 100%;
    }
}

@keyframes yuan{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.swiper-container{
    width: 100%;
    height: 100%;
}
.page{
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: vw(50);
}
.page1{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    background: url(../img/page1_bgr.jpg);
    background-size: 100% 100%;
    .page1_font{
        width: 100%;
        margin-top: vw(328);
        p{
          text-align: center;
          font-size: vw(36);
          color: #1b4698;
          line-height: vw(56);
          letter-spacing: vw(11);
        }
    }
    .page1-bottom{
        position: absolute;
        left: 45%;
        bottom: vw(15);
        width: vw(50);
        height: vw(50);
        animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -ms-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.page2{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    background: url(../img/page2_bgr.jpg);
    background-size: 100% 100%;
    overflow: hidden;
    .page2_li1{
        position: absolute;
        top: 0;
        left: vw(-100);
        width: vw(61);
        height: vw(77);
        img{
            width: 100%;
            height: 100%;
            animation: fudong 10s ease infinite;
            -webkit-animation: fudong 10s ease infinite;
            -ms-animation: fudong 10s ease infinite;
            -moz-animation: fudong 10s ease infinite;
        }
    }
    .page2_li2{
        position: absolute;
        top:vw(50);
        left: vw(-170);
        width: vw(61);
        height: vw(77);
        img{
            width: 100%;
            height: 100%;
            animation: fudong 10s ease 1000ms infinite;
            -webkit-animation: fudong 10s ease 1000ms infinite;
            -ms-animation: fudong 10s ease 1000ms infinite;
            -moz-animation: fudong 10s ease 1000ms infinite;
        }
    }
    .page2_li3{
        position: absolute;
        top:vw(-100);
        left: vw(160);
        width: vw(61);
        height: vw(77);
        img{
            width: 100%;
            height: 100%;
            animation: fudong 10s ease 2000ms infinite;
            -webkit-animation: fudong 10s ease 2000ms infinite;
            -ms-animation: fudong 10s ease 2000ms infinite;
            -moz-animation: fudong 10s ease 2000ms infinite;
        }
    }
    .page2_li4{
        position: absolute;
        top:vw(80);
        left: vw(-100);
        width: vw(61);
        height: vw(77);
        img{
            width: 100%;
            height: 100%;
            animation: fudong 10s ease 3000ms infinite;
             -webkit-animation: fudong 10s ease 3000ms infinite;
            -ms-animation: fudong 10s ease 3000ms infinite;
            -moz-animation: fudong 10s ease 3000ms infinite;
        }
    }
    .page2_li5{
        position: absolute;
        top:vw(-100);
        left: vw(30);
        width: vw(61);
        height: vw(77);
        img{
            width: 100%;
            height: 100%;
            animation: fudong 10s ease 4000ms infinite;
             -webkit-animation: fudong 10s ease 4000ms infinite;
            -ms-animation: fudong 10s ease 4000ms infinite;
            -moz-animation: fudong 10s ease 4000ms infinite;
        }
    }
    .page2_li6{
        position: absolute;
        top:vw(150);
        left: vw(-100);
        width: vw(61);
        height: vw(77);
        img{
            width: 100%;
            height: 100%;
            animation: fudong 10s ease 5000ms infinite;
             -webkit-animation: fudong 10s ease 5000ms infinite;
            -ms-animation: fudong 10s ease 5000ms infinite;
            -moz-animation: fudong 10s ease 5000ms infinite;
        }
    }
    .page2_li7{
        position: absolute;
        top:vw(-70);
        left: vw(-100);
        width: vw(61);
        height: vw(77);
        img{
            width: 100%;
            height: 100%;
            animation: fudong 10s ease 6000ms infinite;
             -webkit-animation: fudong 10s ease 6000ms infinite;
            -ms-animation: fudong 10s ease 6000ms infinite;
            -moz-animation: fudong 10s ease 6000ms infinite;
        }
    }
    .page2_li8{
        position: absolute;
        top:vw(-80);
        left: vw(-130);
        width: vw(61);
        height: vw(77);
        img{
            width: 100%;
            height: 100%;
            animation: fudong 10s ease 7000ms infinite;
             -webkit-animation: fudong 10s ease 7000ms infinite;
            -ms-animation: fudong 10s ease 7000ms infinite;
            -moz-animation: fudong 10s ease 7000ms infinite;
        }
    }
    .page2_li9{
        position: absolute;
        top:vw(60);
        left: vw(-60);
        width: vw(61);
        height: vw(77);
        img{
            width: 100%;
            height: 100%;
            animation: fudong 10s ease 8000ms infinite;
             -webkit-animation: fudong 10s ease 8000ms infinite;
            -ms-animation: fudong 10s ease 8000ms infinite;
            -moz-animation: fudong 10s ease 8000ms infinite;
        }
    }
    .page2_li10{
        position: absolute;
        top:vw(-70);
        left: vw(0);
        width: vw(61);
        height: vw(77);
        img{
            width: 100%;
            height: 100%;
            animation: fudong 10s ease 9000ms infinite;
            -webkit-animation: fudong 10s ease 9000ms infinite;
            -ms-animation: fudong 10s ease 9000ms infinite;
            -moz-animation: fudong 10s ease 9000ms infinite;
        }
    }
    .page2_li11{
        position: absolute;
        top:vw(80);
        left: vw(-90);
        width: vw(61);
        height: vw(77);
        img{
            width: 100%;
            height: 100%;
            animation: fudong 10s ease 10000ms infinite;
             -webkit-animation: fudong 10s ease 10000ms infinite;
            -ms-animation: fudong 10s ease 10000ms infinite;
            -moz-animation: fudong 10s ease 10000ms infinite;
        }
    }
    .page2_li12 {
        position: absolute;
        top: vw(-80);
        left: vw(190);
        width: vw(61);
        height: vw(77);
        img {
            width: 100%;
            height: 100%;
            animation: fudong 10s ease 11000ms infinite;
             -webkit-animation: fudong 10s ease 11000ms infinite;
            -ms-animation: fudong 10s ease 11000ms infinite;
            -moz-animation: fudong 10s ease 11000ms infinite;
        }
    }
    .page2-font{
        width: 100%;
        position: absolute;
        bottom: vw(136);
        left: 0;
        p{
            line-height: vw(54);
            font-size: vw(40);
            text-align: center;
            color: #5fcce3;
        }
    }
    .page2-bottom{
        position: absolute;
        left: 45%;
        bottom: vw(15);
        width: vw(50);
        height: vw(50);
        animation-iteration-count:infinite;
         animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -ms-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        img{
            width: 100%;
            height: 100%;
        }
    }
}

@keyframes fudong{
    0%{
        transform: translateY(-100px) translateX(-100px) rotate(0deg) skewY(0deg);
    }
    
    100%{
        transform:translateY(700px)  translateX(500px) rotate(720deg)  skewY(45deg);
    }
}
@-moz-keyframes fudong{
    0%{
        transform: translateY(-100px) translateX(-100px) rotate(0deg) skewY(0deg);
    }
    
    100%{
        transform:translateY(700px)  translateX(500px) rotate(720deg)  skewY(45deg);
    }
}
@-ms-keyframes fudong{
    0%{
        transform: translateY(-100px) translateX(-100px) rotate(0deg) skewY(0deg);
    }
    
    100%{
        transform:translateY(700px)  translateX(500px) rotate(720deg)  skewY(45deg);
    }
}
@-webkit-keyframes fudong{
    0%{
        transform: translateY(-100px) translateX(-100px) rotate(0deg) skewY(0deg);
    }
    
    100%{
        transform:translateY(700px)  translateX(500px) rotate(720deg)  skewY(45deg);
    }
}
.page3{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    background: url(../img/page3_bgr.jpg);
    background-size: 100% 100%;
    .page3_font{
        margin-top: vw(315);
        p{
            font-size: vw(40);
            text-align: center;
            line-height: vw(80);
            color: #70fcfc;
        }
    }
    .page3-bottom{
        position: absolute;
        left: 45%;
        bottom: vw(15);
        width: vw(50);
        height: vw(50);
        animation-iteration-count:infinite;
         animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -ms-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.page4{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    background: url(../img/page4_bgr.jpg);
    background-size: 100% 100%;
    .page4_people{
        width: vw(621);
        height: vw(502);
        margin-top: vw(191);
        margin-left: vw(10);
        animation-iteration-count:infinite;
         animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -ms-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .page4_font{
        position: absolute;
        left: 0;
        bottom: vw(132);
        width: 100%;
        p{
            font-size: vw(40);
            color: #70fcfc;
            line-height: vw(50);
        }
    }
    .page4-bottom{
        position: absolute;
        left: 45%;
        bottom: vw(15);
        width: vw(50);
        height: vw(50);
        animation-iteration-count:infinite;
         animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -ms-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.page5{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    background: url(../img/page5_bgr.jpg);
    background-size: 100% 100%;
    .page5_head{
        width: 100%;
        height: vw(38);
        margin-top: vw(23);
        text-align: left;
        .head_img{
            display: inline-block;
            margin-left: vw(22);
            width: vw(38);
            height: vw(38);
            text-align: left;
//          animation: yuan 8s ease infinite;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page5_title{
            vertical-align: top;
            display: inline-block;
            text-align: left;
            font-size: vw(22);
            line-height: vw(38);
            color: #1e3787;
            letter-spacing: vw(4);
            text-indent: vw(9);
        }
    }
    .page5_font{
        position: absolute;
        left: 0;
        bottom:vw(155);
        width: 100%;
        p{
            font-size: vw(40);
            line-height: vw(50);
            text-align: center;
            color: #1e3787;
            letter-spacing: vw(10);
        }
    }
    .page5-bottom{
        position: absolute;
        left: 45%;
        bottom: vw(15);
        width: vw(50);
        height: vw(50);
        animation-iteration-count:infinite;
        animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -ms-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.page6{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    background: url(../img/page6_bgr.jpg);
    background-size: 100% 100%;
    .page6_font{
        width: 100%;
        margin-top: vw(363);
        p{
           font-size: vw(40);
           line-height: vw(50);
           text-align: center;
           color: #70fcfc;
           letter-spacing: vw(8);
        }
    }
   
}    